@import 'sidebar.mixin'

aside.app-sidebar
  @include absolute($width: auto, $left: 0, $height: 100%)
  @include flex($direction: column)
  z-index: $z-sidebar
  min-height: 100vh
  background-color: $white
  box-shadow: 0 2px 2px rgba($black,0.2)
  transition: all 0.3s ease

  .sidebar-header
    height: $navbar-height
    width: $sidebar-width
    padding: 0 10px
    position: relative

    .sidebar-brand
      @include flex($align: center, $justify: center)
      height: $navbar-height
      font-size: 1.2em
      font-weight: 300
      color: $black

      .highlight
        padding: 2px 5px
        font-weight: 200
        color: $white
        border-radius: 2px
        margin-right: 5px
    .sidebar-toggle
      display: none
      @include absolute($right: 0, $top: 0, $width: auto)
      height: 100%
      border: 0
      border-radius: 0
      padding: 0 15px
      background-color: transparent
      font-size: 1.4em

  .sidebar-menu
    @include flex($direction: column, $align: center)
    width: $sidebar-width
    flex: 1

    ul.sidebar-nav
      @include flex($direction: column, $align: center)
      height: 100%
      width: 100%
      list-style: none
      margin: 0
      padding: 4rem 0

      & > li
        width: 100%
        & > a
          padding: 1rem 0
          display: block
          text-align: center
          color: $black
          text-decoration: none

          .icon
            @include flex($align: center, $justify: center)
            display: block
            margin: 0 auto
            width: 60px
            height: 60px
            border-radius: 50%
            color: $white
            margin-bottom: 0.6em

            i.fa, i.ion
              width: 100%
              height: 100%
              font-size: 2em
              @include flex($align: center, $justify: center)
              transition: transform 0.2s ease

          .title
            font-weight: 400
            font-size: 0.95em
            color: $grey-darkest
            text-transform: uppercase

          &:hover
            .icon
              i.fa, i.ion
                transform: scale(1.25)
        &.dropdown
          .dropdown-toggle
            position: relative
            &:before
              @include absolute($right: 30px, $top: 0, $width: auto)
              @include flex($align: center, $justify: center)
              font-family: FontAwesome
              content: "\f107"
              color: $grey
              font-size: 1.4em
              transition: all 0.3s ease
              display: none
          .dropdown-menu
            display: block
            visibility: hidden
            position: absolute
            opacity: 0
            left: 100%
            top: 50%
            min-width: 300px
            transition: all 0.3s ease
            transform: translate(0px, -50%)
            border: 1px solid $grey
            & > ul
              list-style: none
              padding: 1rem 2rem
              margin: 0

              &:after
                @include absolute($top: 50%, $left: 0)
                content: ''
                display: block
                width: 0
                height: 0
                transform: translate(-100%, -100%)
                border-top: 15px solid transparent
                border-bottom: 15px solid transparent
                border-right: 15px solid $grey


              & > li
                border: 0
                border-radius: 0
                padding: 0
                margin-bottom: 0
                font-weight: 400
                font-size: 1em

                &.section
                  padding: 1rem
                  padding-left: 3rem
                  font-weight: 300
                  font-size: 1.1em
                  position: relative

                  i
                    @include absolute($left: 0, $top: 0, $width: auto)
                    @include flex($align: center, $justify: center)
                    font-size: 1.2em

                &.line
                  height: 1px
                  background-color: rgba($grey ,0.5)
                  position: relative
                  width: 100%
                  margin-top: 1rem
                  margin-bottom: 1rem

                a
                  display: block
                  text-decoration: none
                  color: $black-lighter
                  padding: 1rem 1rem
                  padding-left: 3rem
                  position: relative

                  &:before
                    @include absolute($right: 15px, $top: 0, $width: auto)
                    @include flex($align: center, $justify: center)
                    font-family: FontAwesome
                    content: "\f105"
                    color: $black-lighter
                    opacity: 0
                    transition: all 0.3s ease
                    transform: translate(50%, 0)

                  &:hover
                    color: $black-lighter

                    &:before
                      opacity: 1
                      transform: translate(0, 0)

  .sidebar-footer
    width: $sidebar-width
    padding: 0
    position: relative
    box-shadow: 0 -1px 2px $grey
    ul.menu
      list-style: none
      margin: 0
      padding: 0
      @include flex($justify: center)

      & > li
        & > a
          padding: 15px 8px
          font-size: 1em
          display: block
          color: $grey-darker

          .flag-icon
            border-radius: 50%
            height: 15px
            width: 15px
            box-shadow: none
        &.dropdown
          position: static !important
          & > a
            position: relative
          .dropdown-menu
            width: 100%
            left: 0
            padding: 0
            top: auto
            bottom: 100%
            z-index: $z-sidebar + 5
            border-radius: 2px
            border: 0
            box-shadow: none

            & > li
              border: 0
              border-radius: 0
              padding: 0
              margin-bottom: 0
              font-weight: 300
              border-bottom: 1px solid rgba($grey-darker,0.2)
              font-size: 0.9em
              background-color: $white
              a
                display: block
                text-decoration: none
                color: $black-lighter
                padding: 0.9rem 1.5rem
                &:hover
                  background-color: $white
                  color: $green-darker


  &.active
    transform: translate(0,0)

@include breakpoint-up($sm)
  aside.app-sidebar
    .sidebar-menu
      ul.sidebar-nav
        & > li
          &.dropdown
            &:hover 
              .dropdown-menu
                display: block
                visibility: visible
                opacity: 1
                transform: translate(-40px, -50%)

@include breakpoint($sm)
  aside.app-sidebar
    transform: translate(-100%,0)
    box-shadow: none
    width: 100%
    
    .sidebar-header, .sidebar-menu, .sidebar-footer
      width: 100%
    .sidebar-header
      height: $navbar-height-min
      border-bottom: 1px solid $grey-lightest
      .sidebar-brand
        height: $navbar-height-min
      .sidebar-toggle
        display: block
    .sidebar-menu
      position: relative
      overflow: auto
      ul.sidebar-nav
        padding: 0
        & > li
          & > a
            @include flex($align: center)
            padding: 15px
            border-bottom: 1px solid $grey-lightest
            .icon
              margin: 0
              background-color: transparent !important
              border-radius: 0
              margin-right: 15px
              width: 40px
              height: 40px
          &.dropdown
            .dropdown-toggle
              &:before
                display: flex
            .dropdown-menu
              display: none
              visibility: visible
              opacity: 1
              width: 100%
              left: 0
              position: relative
              transform: translate(0,0)
              margin-top: 0
              border-radius: 0
              border: 0
              box-shadow: none
              padding: 0
              background-color: rgba($grey, 0.2)
              & > ul
                padding: 0
                & > li
                  border-bottom: 1px solid rgba($grey, 0.5)
                  a
                    padding: 15px
                    padding-left: 70px
                  &.section
                    padding: 15px
                    padding-left: 70px
                    & > i
                      left: 15px
                      margin-right: 15px
                      width: 40px
                      height: 100%
                  &.line
                    display: none
            &.open
              .dropdown-toggle
                &:before
                  content: "\f106"
              .dropdown-menu
                display: block
    &.active
      transform: translate(0,0)
  .app-container.__sidebar
    overflow: hidden
    height: 100vh
    .app-container
      height: 100vh
      overflow: hidden

/* Default */
@include sidebar-theme($green, $white)